import React from 'react';
import Carousel from 'bootstrap/Carousel';
// import Glyphicon from 'bootstrap/Glyphicon';

// images
import img1 from '../../css/img/bg_pic1.jpg';
import img2 from '../../css/img/bg_pic2.jpg';
import img3 from '../../css/img/bg_pic3.jpg';

class AppHomePage extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            index: 0,
            direction: null
        };
    }

    handleSelect = (selectedIndex, e) => {
        this.setState({
            index: selectedIndex,
            direction: e.direction
        });
    }

    render() {
        const { index, direction } = this.state;
        return (
            <div className="home-page">
                <Carousel 
                    onSelect={ this.handleSelect }
                    direction={ direction }
                    defaultActiveIndex={ index }
                >
                    <Carousel.Item>
                        <img src={ img1 } alt="第一张轮播" />
                        <Carousel.Caption>
                            <h3>First slide label</h3>
                            <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                        </Carousel.Caption>
                    </Carousel.Item>
                    <Carousel.Item>
                        <img src={ img2 } alt="第二张轮播" />
                        <Carousel.Caption>
                            <h3>Second slide label</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                        </Carousel.Caption>
                    </Carousel.Item>
                    <Carousel.Item>
                        <img src={ img3 } alt="第三张轮播" />
                        <Carousel.Caption>
                            <h3>Third slide label</h3>
                            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
                        </Carousel.Caption>
                    </Carousel.Item>
                </Carousel>
            </div>
        );
    }
}

export default AppHomePage;